<template>
  <div class="editor-list">
    <div v-if="!isListLoding" ref="pageScroll">
      <a-list item-layout="horizontal" style="overflow-x: hidden;height: 79vh;width: 90vw;" :data-source="lists">
        <a-list-item
          slot="renderItem"
          slot-scope="item, index"
          v-if="item.todo"
          draggable="true"
          :class="{
            'editor-list__drag': dragIndex === index,
            'editor-list__drag-top': dragTargetIndex === index && dragToTop,
            'editor-list__drag-bottom':
              dragTargetIndex === index && !dragToTop,
          }"
          @dragstart="onDragStart($event, index)"
          @dragenter="onDragOver($event, index)"
          @dragover="onDragOver($event, index)"
          @dragend="onDragEnd($event, index)"
        >
          <div
            class="editor-list__text"
            :class="{ 'is-checked': item.checked }"
            v-if="!item.isEditing"
          >
            {{ item.todo }}
          </div>
          <div v-else>
            <a-input v-model="editItem" class="editor-list__editing" />
          </div>
          <div class="editor-list__button">
            <a-icon
              v-if="!item.isEditing"
              :class="{ 'is-checked-icon': item.checked }"
              type="check-circle"
              @click="handleCheckItem(item)"
            />
            <div v-if="!item.checked">
              <div v-if="!item.isEditing">
                <a-icon type="edit" @click="handleEditItem(item)" />
                <a-icon type="copy" @click="handlCopy(item)" />
              </div>
            </div>
            <div v-if="item.isEditing">
              <a-icon type="check" @click="handlecheck(item)" />
              <a-icon type="close" @click="handleClose(item)" />
            </div>
            <a-icon type="delete" @click="handleDeletItem(item)" />
          </div>
          <div class="editor-list__drop-area" />
        </a-list-item>
      </a-list>
    </div>
    <a-skeleton active v-else />
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'

export default {
  name: 'EditorList',
  components: {},
  data () {
    return {
      isListLoding: true,
      editItem: '',
      dragIndex: -1,
      dragTargetIndex: -1,
      dragToTop: false,
      draging: false
    }
  },
  computed: {
    ...mapState('list', ['lists']),
    ...mapGetters('list', ['hasList', 'listOptions'])
  },
  created () {
    this.isListLoding = false
  },
  methods: {
    handleEditItem (item) {
      this.$store.dispatch('list/changeListEditing', item)
      this.editItem = item.todo
    },
    handlecheck (item) {
      if (!this.editItem) {
        this.$message.info('请输入内容')
        return
      }
      const res = this.$store.dispatch('list/changeListEditing', {
        ...item,
        editItem: this.editItem
      })
      res && this.$message.success('保存成功！')
    },
    handleClose (item) {
      this.$store.dispatch('list/changeListEditing', item)
      this.editItem = ''
    },
    handleDeletItem (item) {
      const res = this.$store.dispatch('list/deleteListItem', item)
      res && this.$message.success('删除成功！')
    },
    handlCopy (item) {
      this.$copyText(item.todo).then((e) => {
        this.$message.success('复制成功！')
      })
    },
    handleCheckItem (item) {
      this.$store.dispatch('list/changeListchecked', item)
    },
    onDragStart (e, index) {
      e.dataTransfer.dropEffect = 'move'
      this.dragIndex = index

      const { top, height } = this.$refs.pageScroll.getBoundingClientRect()
      this.contentTop = top
      this.contentHeight = height
    },
    onDragOver (e, index) {
      const target = e.target
      if (index === this.dragIndex) {
        return
      }
      const { contentTop } = this
      const { pageScroll } = this.$refs
      const top = target.offsetTop - pageScroll.scrollTop + contentTop
      const height = target.offsetHeight
      const clientY = e.clientY
      this.dragToTop = clientY < top + height / 2
      this.dragTargetIndex = index
    },
    onDragEnd () {
      const dragIndex = this.dragIndex
      const dragTargetIndex = this.dragTargetIndex
      let targetIndex = this.dragToTop ? dragTargetIndex - 1 : dragTargetIndex
      targetIndex = Math.max(0, targetIndex)
      this.dragIndex = -1
      this.dragTargetIndex = -1
      if (dragIndex === targetIndex || dragTargetIndex === -1) {
        return
      }
      this.$store.dispatch('list/changeListIndex', { dragIndex, targetIndex })
    }
  }
}
</script>

<style lang="less">
.editor-list {
  padding: 0 1rem 1rem 1rem;
  &__button {
    position: absolute;
    right: .4rem;
    display: inline-flex;
    align-items: center;
  }
  .is-checked {
    text-decoration: line-through;
    color: #666565;
  }
  &__text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  &__editing {
    width: 70vw;
    height: 1.6rem;
  }
  &__drag {
    opacity: 0.4;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
    .editor-resource-page__layout {
      &__remove,
      &__copy,
      &__more {
        display: none;
      }
    }
    &.activated {
      background-color: transparent;
    }
  }
  &__drag-top {
    cursor: move;
    .editor-list__drop-area {
      position: absolute;
      display: block;
      height: 0.1rem;
      width: 18rem;
      background: azure;
      z-index: 2;
      margin-bottom: 2.2rem;
      &::after {
        content: "";
        position: absolute;
        top: 50%;
        margin-top: -0.2rem;
        left: -0.1rem;
        width: 0.4rem;
        height: 0.4rem;
        border: 0.1rem;
        border-radius: 50%;
        background-color: #fff;
      }
    }
  }

  &__drag-bottom {
    cursor: move;
    .editor-list__drop-area {
      position: absolute;
      display: block;
      height: 0.1rem;
      width: 18rem;
      margin-bottom: -2.24rem;
      background: azure;
      &::after {
        content: "";
        position: absolute;
        top: 50%;
        margin-top: -0.2rem;
        left: -0.1rem;
        width: 0.4rem;
        height: 0.4rem;
        border: 0.1rem;
        border-radius: 50%;
        background-color: #fff;
      }
    }
  }
  .ant-list-split .ant-list-item {
    border: 1px solid #e8e8e8;
    border-radius: 4px;
  }
  .ant-list-item {
    color: #fff;
    padding: 0.4rem;
    margin: 0.4rem 0;
  }
}
</style>
